<%@ include file="/WEB-INF/views/taglib.jsp" %>
<h3>Serial No Form</h3>	
	<form:form id="form" method="post" modelAttribute="assetModel" cssClass="simpleForm tableForm">
		<form:hidden path="assetModelId" />
		<div class="clear" style="height:1px">&nbsp;</div>
		<jsp:include page="/WEB-INF/views/message.jsp"></jsp:include>
	  	<fieldset>
	  		<p>
	  		
	  		<label>Asset Model</label> ${assetModel.assetModelName }
	  		</p>
	  		<div class="head">
	  		Serial No Info
	  		<span>
	  		<a class="CD_addNew" href="#" onclick="addRow()" title="Add Row">
	  		<img align="absmiddle" src="${imageUrl}/icon_add.png"> Add Row
	  		</a>
	  		</span>
	  		</div>
	  		<table id="serialNoTable" class="gridSearch">
	  			 <col width="5%">
	 			 <col width="10%">
	 			 <col width="40%">
	 			 <col width="10%">
	 			 <col width="10%">
	 			 <col width="10%">
	 			 <col width="5%">
	  			<thead>
	  				<tr>
	  					<th>S/N</th>
	  					<th>Serial No</th>
	  					<th>Information</th>
	  					<th>Taxi No</th>
	  					<th>Price</th>
	  					<th>Status</th>
	  					<th>Remove</th>
	  				</tr>
	  			</thead>
	  			<tbody>
	  			<c:forEach items="${assetModel.assetEquipments}" var="item" varStatus="status">
	  				<tr <c:if test="${item.dateCreated==null}">class="new"</c:if>>
	  					<td>${status.index+1 }
	  					</td>
	  					<td>
	  						<input name="assetEquipments[${status.index}].deleted" type="hidden" value="false" />
	  						<input name="assetEquipments[${status.index}].assetEquipmentPK.assetModel.assetModelId" type="hidden" value="${assetModel.assetModelId }"  />
							<input name="assetEquipments[${status.index}].assetEquipmentPK.serialNo" type="text" value="${item.assetEquipmentPK.serialNo}" size="15" />
	  							  						
	  					</td>
	  					<td>
	  						<p>
	  						<label>Location : </label>
	  						
	  						<select name="assetEquipments[${status.index}].location.locationId">
								<c:forEach items="${globalLocation}" var="item2">
									<option value="${item2.locationId}" <c:if test="${item2.locationId==item.location.locationId}">selected</c:if>>${item2.locationName}</option>
								</c:forEach>
							</select>
							</p>
							<c:if test="${not empty item.effectiveStartDate}">
							<p>
	  						<label>
							Eff. Date : </label>
							<fmt:formatDate value="${item.effectiveStartDate}" pattern="${globalDateFormatJava}" /> -
							<fmt:formatDate value="${item.effectiveEndDate}" pattern="${globalDateFormatJava}" />
							</p>
							</c:if>
							<c:if test="${not empty item.assetTag}">
							<p>
	  						<label>
							Asset Tag : </label> ${item.assetTag}
							</p>
							</c:if>
										  		
						</td>
	  					<td>
	  						<input name="assetEquipments[${status.index}].subLocationId" type="text" value="${item.subLocationId}" size="10" />	
	  					</td>
	  					<td>
	  						<input name="assetEquipments[${status.index}].unitPrice" type="text" value="${item.unitPrice}" size="10"  />
	  					</td>
	  					<td>
	  						<select name="assetEquipments[${status.index}].assetEquipmentStatus">
	  							<c:forEach items="${globalAssetModelStatusMap}" var="item2">
									<option value="${item2.key}" <c:if test="${item2.key==item.assetEquipmentStatus}">selected</c:if>>${item2.value}</option>
								</c:forEach>
	  						</select>
	  					</td> 
	  					<td>
	  						<a href="#" onclick="removeRow(this)" title="Delete Row">
	  						<img align="absmiddle" src="${imageUrl}/icon_delete.png">
	  						</a>
	  					</td>
	  				</tr>
	  			</c:forEach>
	  			</tbody>
	  		</table>
			</fieldset>
      <div class="action">
			<button type="submit"  class="button positive">
			Update</button>
			<a href="<c:url value="/assetModel/detail/${assetModel.assetModelId}" />" class="button">Back</a>
	 </div>	
	</form:form>
	
	<table id="tmpTable" style="visibility:hidden">
		<tr class="new">
			<td></td>
			<td>
				<input name="assetEquipments.deleted" type="hidden" value="false" />
				<input name="assetEquipments.assetEquipmentPK.assetModel.assetModelId" type="hidden" value="${assetModel.assetModelId }"  />
				<input name="assetEquipments.assetEquipmentPK.serialNo" type="text" size="15"  />									
			</td>
			<td>
				<p>
	  			<label>Location : </label>
				<select name="assetEquipments.location.locationId">
					<c:forEach items="${globalLocation}" var="item">
						<option value="${item.locationId}">${item.locationName}</option>
					</c:forEach>
				</select>
				</p>						  		
			</td>
			<td>
				<input name="assetEquipments.subLocationId" type="text" size="10"  />	
			</td>
			<td>
				<input name="assetEquipments.unitPrice" type="text" size="10"/>
			</td>
			<td> 
				<select name="assetEquipments.assetEquipmentStatus">
					<c:forEach items="${globalAssetModelStatusMap}" var="item">
						<option value="${item.key}">${item.value}</option>
					</c:forEach>
				</select>
			</td> 
			<td>
				<a href="#" onclick="removeRow(this)" title="Delete Row">
					<img align="absmiddle" src="${imageUrl}/icon_delete.png">
				</a>
			</td>
		</tr>
	</table>
	<script type="text/javascript">
		$(document).ready(function() {
			
			
			$.getJSON("<c:url value="/ajax/asset/all"></c:url>", function(data) {
				globalAssetModel=data;
				
			});
			
		});
		
		
		function addRow()
		{
			var row = $('#tmpTable tr').clone();
			var rowSize = $('#serialNoTable tbody tr').size();
			$('td:eq(0)',row).text(rowSize+1);
			$('input[name=assetEquipments.deleted]',row).attr('name','assetEquipments['+rowSize+'].deleted');
			$('input[name=assetEquipments.assetEquipmentPK.serialNo]',row).attr('name','assetEquipments['+rowSize+'].assetEquipmentPK.serialNo');
			$('input[name=assetEquipments.assetEquipmentPK.assetModel.assetModelId]',row).attr('name','assetEquipments['+rowSize+'].assetEquipmentPK.assetModel.assetModelId');
			$('select[name=assetEquipments.location.locationId]',row).attr('name','assetEquipments['+rowSize+'].location.locationId');
			$('input[name=assetEquipments.subLocationId]',row).attr('name','assetEquipments['+rowSize+'].subLocationId');
			$('input[name=assetEquipments.unitPrice]',row).attr('name','assetEquipments['+rowSize+'].unitPrice');
			$('select[name=assetEquipments.assetEquipmentStatus]',row).attr('name','assetEquipments['+rowSize+'].assetEquipmentStatus');
						
			row.appendTo('#serialNoTable tbody');
			
		}
		
		function removeRow(obj)
		{
			var ctx = $(obj).parent().parent();
			if(ctx.hasClass('new'))
				ctx.remove();
			else
			{
				$('input[name*=deleted]',ctx).val('true');
				ctx.hide();
			}
		}
	</script>